<template>
  <view class="container">
	  
	  <view class="top-title">
		  <p>消息列表</p>
	  </view>
	  
	  <view class="main-name" @click="toChatRoom">
	  	<view class="main-name-left">
	  		<image src="../../static/icon/name.jpg" mode=""></image>
	  	</view>
	  	<view class="h1-box">
	  		<p>小意</p>
	  		<text>遇见你才是最大的幸运</text>
	  	</view>
		
		<view class="date-title">
			2023-3-31
		</view>
		
	  </view>
	  <view class="main-name" @click="toChatRoom">
	  	<view class="main-name-left">
	  		<image src="../../static/icon/nameone.jpg" mode=""></image>
	  	</view>
	  	<view class="h1-box">
	  		<p>小若</p>
	  		<text>我来啦，你还在吗？</text>
	  	</view>
		
		<view class="date-title">
			2023-3-31
		</view>
	  </view>
	  <!-- <view class="main-name" @click="toChatRoom">
	  	<view class="main-name-left">
	  		<image src="../../static/icon/name.jpg" mode=""></image>
	  	</view>
	  	<view class="h1-box">
	  		<p>昨日青空</p>
	  		<text>我喜欢你就像风走了八千里</text>
	  	</view>
	  </view> -->
    <!-- <button class="btn" @click="toChatRoom">在线聊天</button> -->
  </view>
</template>
<script>
export default {
  methods: {
    toChatRoom() {
      uni.navigateTo({
        url: '/pages/plan/chartroom/chartroom'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
$color:#898282;
.container {
	width: 100%;
  display: flex;
  flex-direction: column;

.top-title{
	margin: 10px auto;
	width: 90%;
	font-size: 30rpx;
}
  // color: cornsilk;
  
  .main-name{
  			 margin: 10px auto;
  			 width: 90%;
  			 display: flex;
  			 justify-content: space-between;
  			 justify-items: center;
			 border-bottom: 1px solid silver;
  			 
  			 .main-name-left{
  				 margin: auto 0px;
				 border-radius: 50%;
  				image{
					border-radius: 50%;
  			 	width: 40px;
  			 	height: 40px;
  			 };
  			 }
  			 
  
  			 
  			 .h1-box{
  				 // text-align: center;
  				 width: 50%;
				 margin-left: 20px;
  				 display: flex;
				 flex-direction: column;
				 line-height: 25px;
  				 
  				 p{
  					 font-size: 30rpx;
  				 }
				 
				 text{
					 // margin-top: 10px;
					 font-size: 24rpx;
					 color: $color;
				 }
  			 }
			 
			 .date-title{
				 text-align: left;
				 p{
					 font-size: 30rpx;
				 }
			 }
  }
}

</style>